<style scoped>
    #page-buy-record{
        background: #f2f2f2;
    }

    #page-buy-record .w-nav {
        background-color: #f7f7f7;
        height: 36px;
        display: -webkit-box;
        display: box;
        font-size:.12rem !important;
    }

    #page-buy-record .m-simpleHeader .ico{
        margin-top:.1rem;
        vertical-align: top;

    }


    .v-buyRecord-list{
        width:calc(100% - .25rem);
        padding:.05rem .125rem 0 .125rem;
        margin:0 0 .05rem 0;
    }

    .v-buyRecord-container{
        width:100%;
        height:1.34rem;
        display: flex;
        flex-direction: row;
    }

    .v-buyRecord-list-imgBox{
        width: .71rem;
        height:calc(100% - .2rem);
        padding:0 .1rem .2rem .1rem;

        border-bottom:1px solid #e3e3e3;

    }

    .v-buyRecord-list-imgBox img{
        object-fit: contain;
        object-position: center center;
        width:100%;
        height:100%;
    }

    .v-buyRecord-list-info{
        border-bottom:1px solid #e3e3e3;
        padding-bottom:.2rem;
        width:calc(100% - .91rem);
        height:calc(100% - .2rem);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size:.13rem;
    }

    .font12{
        font-size:.12rem !important;
    }

    .v-buyRecord-reBuyStatus{
        height:.25rem;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress{
        width:calc(100% - .77rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress li{
        width:100%;
    }


    .v-buyRecord-reBuyStatus .reBuyStatus-progress li:nth-child(1){
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress .v-progressBar{
        display: block;
        border-radius:.1rem;
        background: #dedede;
        height:.06rem;
    }

    .v-buyRecord-reBuyStatus .reBuyStatus-progress .v-progressBar span{
        display: block;
        height:100%;
        border-radius:inherit;

    }

    .v-buyRecord-btn{
        display: block;
        border-radius:.05rem;
        border:1px solid #ef3737;
        width:.62rem;

        text-align: center;
        line-height:.25rem;
    }

    .v-buyRecord-personalInfo{
        width:100%;
        font-size:.12rem;
        height: .36rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
</style>
<template>
    <div id="page-buy-record" class="page-user page-wrap">
        <div class="m-user">
            <header-component keep-alive :page-name="pageName"></header-component>
            <div class="m-user-duobaoRecord">
                <div class="w-nav w-nav-hasSplt w-nav-hasBorder">
                    <div :class="['w-nav-item',tab=='getMyIndiana'?'w-nav-item-on':'']"  @click="tab='getMyIndiana'" data-tabhref="?c=buyRecord"><span class="w-nav-txt">全部</span></div>
                    <div :class="['w-nav-item',tab=='getMyUnderway'?'w-nav-item-on':'']" @click="tab='getMyUnderway'" data-tabhref="?c=buyRecord&amp;tab=going"><span class="w-nav-txt">进行中</span></div>
                    <div :class="['w-nav-item',tab=='getMyAlreadyAnnounced'?'w-nav-item-on':'']" @click="tab='getMyAlreadyAnnounced'" data-tabhref="?c=buyRecord&amp;tab=end"><span class="w-nav-txt">已揭晓</span></div>
                </div>
                <ul class="w-goodsList w-goodsList-l m-user-goodsList" id="buyRecordList">
                    <li class="background_12 v-buyRecord-list" v-for="(k,i) in item">
                        <div class="v-buyRecord-container">
                            <div :class="['v-buyRecord-list-imgBox',!!i.isTen?'isTen':'']" >
                                <a href="javascript:;" data-href="?c=detail&amp;id={{goodsId}}" v-link="{path:'/detail',query:{id:i.goodsId}}"><img :src="i.goodsImg"/> </a>
                            </div>
                            <div class="v-buyRecord-list-info">
                                <p class="color_6">{{i.goodsName}}</p>
                                <p class="color_8 font12">期号：{{i.periods}}</p>
                                <template v-if="!!i.endTime">
                                    <p class=" color_8 font12">获得者：<a href="javascript:;" data-href="?c=profile&amp;id={{lucklyManId}}" v-link="{name:'profile',query:{id:i.lucklyManId}}">{{i.lucklyMan}}</a>（本期参与{{i.luncklyCount}}人次）</p>
                                    <p class="color_8 font12">幸运号码：<em class="color_13">{{i.lucklyCode}}</em></p>
                                    <p class="color_8 font12">揭晓时间：{{i.endTime}}</p>
                                </template>

                                <template v-else>
                                    <div class="v-buyRecord-reBuyStatus">
                                        <ul class="reBuyStatus-progress">
                                            <li class="font12 color_8"><span>总需{{i.totalNeed}}人次</span><span>剩余{{i.need}}</span></li>
                                            <li class="v-progressBar">
                                                <span class="background_13" :style="{width:100-(i.need/i.totalNeed)*100+'%'}"></span>
                                            </li>
                                        </ul>

                                        <template v-if="!i.endTime&&i.need>0">
                                            <a class="color_12 background_13 v-buyRecord-btn" href="javascript:;" data-href="?c=detail&amp;id={{goodsId}}" v-link="{path:'/detail',query:{id:i.goodsId}}">追加</a>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <div class="v-buyRecord-personalInfo">
                        <span class="color_5">
                            本期参与：{{i.count}}人次
                        </span>
                            <a href="javascript:;" data-codeViewTitle="{{i.goodsName}}" data-codeViewTimes="{{i.count}}" data-codeViewPeriods="{{i.periods}}" data-codeView="{{i.code}}" @click="showMyCode(i)">查看我的号码</a>
                        </div>
                    </li>
                </ul>
                <div class="w-more" id="buyRecordMore" v-el:buy-record-more>
                    <template v-if="!hasMore&&page!=0">
                        没有更多了
                    </template>
                    <template v-if="hasMore">
                        <b class="ico ico-loading"></b> 努力加载中
                    </template>
                    <template v-if="!hasMore&&page==0">
                        暂无记录
                    </template>
                </div>
            </div>
        </div>
    </div>

    <code-pop :code-list="codeData.code" :status-code="statusCode" :periods="codeData.periods" :goodsname="codeData.goodsName" :count="codeData.count"></code-pop>
</template>
<script>
    import Request from '../config/request'
//    import Config from '../config/config'
    import User from '../module/user'
    import headerComponent from '../components/header'
    import codePop from '../components/codePop'
    module.exports = {
        data() {
            return {

                tab: 'getMyIndiana',
                page: 1,
                hasMore: true,
                loading: false,
                item:[],
                pageName:'拼宝记录',
                codeData:{},
                statusCode:false

            }
        },

        created(){

            this.$dispatch('isLoading',true)

        },
        async ready() {

            if(!User.isLogin){

                this.$router.go({path:'/login'});

                return;

            }

            await this.loadMore();

            document.addEventListener('scroll',this.getMore,false);

            this.$dispatch('isLoading',false)

        },
        beforeDestroy() {

            document.removeEventListener('scroll',this.getMore,false);

        },

        components:{

            headerComponent,
            codePop

        },
        watch:{

            async tab(val){

                this.page=1;

                this.hasMore=true;

                this.item.splice(0,this.item.length);

                await this.loadMore();

            }
        },
        methods: {

            showMyCode(obj){

                this.codeData = Object.assign({},this.codeData,obj);

                this.statusCode = true;

            },

            async getMore(){

                let pos = this.$els.buyRecordMore.getBoundingClientRect();

                if (this.hasMore &&
                        ((pos.top> 0 && window.innerHeight - pos.top> 0) ||
                        (pos.top <= 0 && pos.bottom >= 0))) {

                    await this.loadMore();

                }
            },

            async loadMore(){

                if (this.loading) {

                    return;

                }

                this.loading = true;

                let data =  await User.getRecordByFunction(this.page,this.tab);

                if (data.status == 200 && data.data && (!!data.data.underway || !!data.data.complete)) {

                    this.page++;

                    let len = 0;

                    if (!!data.data.underway) {

                        len += data.data.underway.length;

                        this.item.push(...data.data.underway);

                    }
                    if (!!data.data.complete){

                        len += data.data.complete.length;

                        this.item.push(...data.data.complete);

                    }

                    if(len < 10) this.hasMore = false;

                }else{

                    this.hasMore=false;

                }

                this.loading=false;

            },


        },
        events:{

            closeCodePop(val){

                console.log('asdad')

                this.statusCode = val;

            }

        }
    }
</script>
